<template>
  <div class="debater-profile">
    <div class="header">
      <h1>辩手能力分析</h1>
      <p class="subtitle">专业辩手的成长之路，从数据开始</p>
    </div>

    <div class="badge-section">
      <div class="badge-display" :class="currentBadge.name">
        <div class="badge-icon">
          <div class="circle" :style="{backgroundColor: currentBadge.color}">
            <i :class="currentBadge.icon"></i>
          </div>
        </div>
        <div class="badge-info">
          <h2 v-if="getLevel!=''">{{ currentBadge.name }} · {{ getLevel }}</h2>
          <h2 v-else>{{ currentBadge.name }}</h2>
          <div class="progress-container">
            <div class="progress-label">成就进度</div>
            <div class="progress-bar">
              <div 
                class="progress-fill" 
                :style="{width: `${(userData.points / nextBadge.threshold) * 100}%`, backgroundColor: currentBadge.color}"
              ></div>
            </div>
            <div class="progress-legend">
              <span>{{ userData.points.toLocaleString() }} / {{ nextBadge.threshold.toLocaleString() }} 积分</span>
              <span v-if="userData.points<3000">下一等级: {{ nextBadge.name }}</span>
              <span v-else>下一等级:已到最高等级</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="badge-tiers">
        <div 
          v-for="badge in badgeTiers" 
          :key="badge.name" 
          class="badge-tier"
          :class="{'active': badge.threshold <= userData.points}"
        >
          <div class="tier-icon" :style="{color: badge.color}">
            <i :class="badge.icon"></i>
          </div>
          <div class="tier-info">
            <div>{{ badge.name }}</div>
            <div>{{ badge.threshold.toLocaleString() }} 积分</div>
          </div>
        </div>
      </div>
    </div>

    <div class="stats-section">
      <div class="stat-card stat-card-1">
        <div class="stat-icon">
          <i class="fas fa-trophy"></i>
        </div>
        <div class="stat-content">
          <h3>总胜率</h3>
          <div class="stat-value">{{ (userData.winRate * 100).toFixed(1) }}%</div>
          <div class="stat-trend">
            <i class="fas fa-arrow-up" v-if="userData.winRateTrend > 0"></i>
            <i class="fas fa-arrow-down" v-else></i>
            {{ Math.abs(userData.winRateTrend * 100).toFixed(1) }}%
          </div>
        </div>
      </div>
      
      <div class="stat-card stat-card-2">
        <div class="stat-icon">
          <i class="fas fa-comments"></i>
        </div>
        <div class="stat-content">
          <h3>辩论场次</h3>
          <div class="stat-value">{{ userData.debateCount }}</div>
          <div class="recent-activity">
            近30天: {{ userData.recentDebates }} 场
          </div>
        </div>
      </div>
    </div>

    <div class="chart-grid">
      <div class="chart-container">
        <h3>主题分布</h3>
        <div class="chart-inner">
          <div id="topic-chart" style="height: 100%; width: 100%;"></div>
        </div>
      </div>
      
      <div class="chart-container">
        <h3>能力雷达图</h3>
        <div class="chart-inner">
          <div id="radar-chart" style="height: 100%; width: 100%;"></div>
        </div>
      </div>
      
      <div class="chart-container">
        <h3>胜负趋势</h3>
        <div class="chart-inner">
          <div id="trend-chart" style="height: 100%; width: 100%;"></div>
        </div>
      </div>
      
      <div class="chart-container">
        <h3>积分成长</h3>
        <div class="chart-inner">
          <div id="points-chart" style="height: 100%; width: 100%;"></div>
        </div>
      </div>
    </div>

    <div class="ranking-section">
      <h3>辩手排名</h3>
      <div class="ranking-container">
        <div class="rank-badge">
          您领先于<span>{{ (userData.ranking.percentile * 100).toFixed(1) }}</span>%的辩手
        </div>
        <div class="ranking-details">
          <div class="rank-position">
            <div class="rank-number">#{{ userData.ranking.position }}</div>
            <div class="rank-label">当前排名</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="insights-section">
      <h3>能力洞察</h3>
      <div class="insights-grid">
        <div class="insight-card">
          <i class="fas fa-lightbulb"></i>
          <h4>最强领域</h4>
          <div class="insight-value">{{ userData.strengths }}</div>
          <div class="insight-desc">您在辩论中的优势</div>
        </div>
        
        <div class="insight-card">
          <i class="fas fa-brain"></i>
          <h4>最佳风格</h4>
          <div class="insight-value">{{ userData.bestStyle }}</div>
          <div class="insight-desc">最适合您的辩论方式</div>
        </div>
        
        <div class="insight-card">
          <i class="fas fa-chart-line"></i>
          <h4>成长空间</h4>
          <div class="insight-value">{{ userData.weaknesses }}</div>
          <div class="insight-desc">可以提升的领域</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { useAppStore } from '../stores/app';
import { getUserDebateData } from '../services/userServ';
import { error } from '../tools/messageBox';

const userStore=useAppStore();
const userId=userStore.userInfo.id;

export default {
  name: 'DebaterProfile',
  data() {
    return {
      userData: {
        points: 2800,//积分
        winRate: 0.72,     //胜率
        winRateTrend: 0.05,//胜率变化幅度
        debateCount: 68,   //辩论场次
        recentDebates: 12, //最近一个月内的辩论次数
        strengths: "逻辑推理",//在辩论中的优势
        weaknesses: "情感共鸣",//可以提升的领域
        bestStyle: "数据驱动型",//最适合的辩论方式
        topics: [//主题数据
          { name: '科学技术', value: 18, color: '#5470C6' },
          { name: '社会人文', value: 15, color: '#91CC75' },
          { name: '经济金融', value: 12, color: '#FAC858' },
          { name: '教育文化', value: 8, color: '#EE6666' },
          { name: '医疗卫生', value: 7, color: '#73C0DE' },
          { name: '自然环境', value: 5, color: '#3BA272' },
          { name: '法律政治', value: 3, color: '#FC8452' }
        ],
        skills: [//能力数据
          { name: '逻辑思维', value: 92 },
          { name: '知识储备', value: 85 },
          { name: '语言表达', value: 78 },
          { name: '应变能力', value: 88 },
          { name: '说服力', value: 75 },
          { name: '团队协作', value: 82 }
        ],
        trendData: [//胜率变化数据
          ['6月前', 0.65, 0.35],
          ['5月前', 0.68, 0.32],
          ['4月前', 0.62, 0.38],
          ['3月前', 0.71, 0.29],
          ['2月前', 0.74, 0.26],
          ['上月', 0.72, 0.28]
        ],
        pointsHistory:[//积分变化数据
            ['6月前',500],
            ['5月前',800],
            ['4月前',1200],
            ['3月前',1500],
            ['2月前',1800],
            ['1月前',2100],
            ['当前',2450]
        ],
        ranking: {//排名数据
          position: 12540,//排名
          percentile: 0.85,//领先多少
        }
      },
      level: ["Ⅰ","Ⅱ","Ⅲ"],
      badgeTiers: [
        { name: "青铜辩手", threshold: 500, icon: "fas fa-shield-alt", color: "#CD7F32" },
        { name: "白银辩手", threshold: 1500, icon: "fas fa-shield-alt", color: "#C0C0C0" },
        { name: "黄金辩手", threshold: 3000, icon: "fas fa-shield-alt", color: "#FFD700" }
      ]
    };
  },
  computed: {
    currentBadge() {
      // 根据积分确定当前徽章
      if (this.userData.points >= 3000) return this.badgeTiers[2];
      if (this.userData.points >= 1500) return this.badgeTiers[1];
      if (this.userData.points >=500) return this.badgeTiers[0];
      return {name:"暂未获得徽章" ,threshold: 1 ,icon: "", color:"rgb(202, 219, 255)"}
    },
    nextBadge() {
      // 获取下一个徽章等级
      if (this.userData.points < 500) return this.badgeTiers[0];
      if (this.userData.points < 1500) return this.badgeTiers[1];
      if (this.userData.points < 3000) return this.badgeTiers[2];
      return this.badgeTiers[2];
    },
    getLevel(){
        if(this.userData.points<500) return '';
        if(this.userData.points<1500) return this.level[0];
        if(this.userData.points<3000) return this.level[1];
        return this.level[2];
    }
  },
  mounted() {
    this.initData();
    this.initCharts();
    this.addAnimationEffects();
  },
  methods: {
    initData(){
        const res=getUserDebateData(userId);
        if(res.code!=200)
            error("请求数据失败")
        else{
            this.userData=res.data
        }
    },

    initCharts() {
      // 主题分布环形图
      this.initTopicChart();
      
      // 能力雷达图
      this.initRadarChart();
      
      // 胜负趋势图
      this.initTrendChart();
      
      // 积分成长图
      this.initPointsChart();
    },
    
    initTopicChart() {
      const chart = echarts.init(document.getElementById('topic-chart'));
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
            color: '#333'
          }
        },
        series: [{
          name: '辩论主题',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.userData.topics
        }]
      };
      chart.setOption(option);
    },
    
    initRadarChart() {
      const chart = echarts.init(document.getElementById('radar-chart'));
      const option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          radius: '65%',
          splitNumber: 8,
          indicator: this.userData.skills.map(skill => ({ 
            name: skill.name, 
            max: 100 
          })),
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250, 250, 250, 0.3)', 'rgba(200, 200, 200, 0.1)']
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)'
            }
          }
        },
        series: [{
          type: 'radar',
          symbolSize: 8,
          data: [{
            value: this.userData.skills.map(skill => skill.value),
            name: '能力评估',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
              ])
            },
            lineStyle: {
              color: '#409EFF',
              width: 2
            },
            itemStyle: {
              color: '#409EFF'
            }
          }]
        }]
      };
      chart.setOption(option);
    },
    
    initTrendChart() {
      const chart = echarts.init(document.getElementById('trend-chart'));
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['胜率', '败率'],
          bottom: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.userData.trendData.map(item => item[0])
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value) {
              return (value * 100) + '%';
            }
          },
          min: 0,
          max: 1
        },
        series: [
          {
            name: '胜率',
            type: 'line',
            smooth: true,
            data: this.userData.trendData.map(item => item[1]),
            lineStyle: {
              width: 3,
              color: '#5cb85c'
            },
            itemStyle: {
              color: '#5cb85c'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(92, 184, 92, 0.4)' },
                { offset: 1, color: 'rgba(92, 184, 92, 0.1)' }
              ])
            }
          },
          {
            name: '败率',
            type: 'line',
            smooth: true,
            data: this.userData.trendData.map(item => item[2]),
            lineStyle: {
              width: 3,
              color: '#d9534f'
            },
            itemStyle: {
              color: '#d9534f'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(217, 83, 79, 0.4)' },
                { offset: 1, color: 'rgba(217, 83, 79, 0.1)' }
              ])
            }
          }
        ]
      };
      chart.setOption(option);
    },
    
    initPointsChart() {
      const chart = echarts.init(document.getElementById('points-chart'));
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.userData.pointsHistory.map(item=>item[0])
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.userData.pointsHistory.map(item=>item[1]),
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 4,
              color: '#409EFF'
            },
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(64, 158, 255, 0.4)' },
                { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
              ])
            },
          }
        ]
      };
      chart.setOption(option);
    },
    
    addAnimationEffects() {
      // 徽章动画效果
      setTimeout(() => {
        const badgeCircle = document.querySelector('.badge-display .circle');
        if (badgeCircle) {
          badgeCircle.classList.add('pulse');
          setTimeout(() => badgeCircle.classList.remove('pulse'), 1000);
        }
      }, 500);
      
      // 卡片进场动画
      const statCards = document.querySelectorAll('.stat-card');
      statCards.forEach((card, index) => {
        setTimeout(() => {
          card.style.opacity = 1;
          card.style.transform = 'translateY(0)';
        }, 300 + index * 100);
      });
      
      // 图表的动画效果
      const chartContainers = document.querySelectorAll('.chart-inner');
      chartContainers.forEach((container, index) => {
        setTimeout(() => {
          container.style.opacity = 1;
        }, 500 + index * 150);
      });
    }
  }
};
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root {
  --primary-color: #409EFF;
  --success-color: #5cb85c;
  --warning-color: #f0ad4e;
  --danger-color: #d9534f;
  --info-color: #5bc0de;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-600: #6c757d;
  --gray-800: #343a40;
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --border-radius: 0.75rem;
  --transition: all 0.3s ease;
}

body {
  margin: 0;
  background-color: #f8fafc;
  font-family: 'Noto Sans SC', sans-serif;
  color: var(--gray-800);
}

.debater-profile {
  max-width: 1200px;
  margin: 0 auto;
//   padding: 2rem;
}

.header {
  text-align: center;
  margin-bottom: 2.5rem;
  h1 {
    font-weight: 700;
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #3a8ffe, #0f5aab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .subtitle {
    font-size: 1.15rem;
    color: var(--gray-600);
    margin-top: 0;
  }
}

.badge-section {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
  overflow: hidden;
  transition: var(--transition);
  
  &:hover {
    box-shadow: var(--shadow);
  }
  
  .badge-display {
    display: flex;
    align-items: center;
    padding: 2rem;
    
    .badge-icon {
      width: 30%;
      display: flex;
      justify-content: center;
      
      .circle {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        
        i {
          font-size: 5rem;
          color: white;
        }
      }
      
      .pulse {
        animation: pulse 1.5s ease-in-out;
      }
    }
    
    .badge-info {
      width: 70%;
      padding-left: 2rem;
      
      h2 {
        margin-top: 0;
        margin-bottom: 1.5rem;
        font-weight: 700;
        font-size: 2rem;
      }
      
      .progress-container {
        .progress-label {
          font-weight: 500;
          margin-bottom: 0.5rem;
          color: var(--gray-600);
        }
        
        .progress-bar {
          height: 1rem;
          background-color: var(--gray-200);
          border-radius: 10px;
          overflow: hidden;
          box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
          
          .progress-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 1.5s ease;
          }
        }
        
        .progress-legend {
          display: flex;
          justify-content: space-between;
          margin-top: 0.75rem;
          font-size: 0.9rem;
          color: var(--gray-600);
        }
      }
    }
    
    // 不同徽章的样式
    &.青铜辩手 .circle {
      background: linear-gradient(135deg, #CD7F32, #a46822);
    }
    &.白银辩手 .circle {
      background: linear-gradient(135deg, #C0C0C0, #9a9a9a);
    }
    &.黄金辩手 .circle {
      background: linear-gradient(135deg, #FFD700, #d4af37);
    }
  }
  
  .badge-tiers {
    display: flex;
    background-color: var(--gray-100);
    border-top: 1px solid var(--gray-200);
    padding: 1.25rem;
    
    .badge-tier {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0.75rem;
      opacity: 0.6;
      transition: var(--transition);
      
      &.active {
        opacity: 1;
        transform: translateY(-5px);
        
        .tier-icon {
          transform: scale(1.15);
        }
      }
      
      .tier-icon {
        font-size: 2rem;
        width: 60px;
        text-align: center;
        transition: var(--transition);
      }
      
      .tier-info {
        div:first-child {
          font-weight: 500;
          margin-bottom: 0.25rem;
        }
        
        div:last-child {
          font-size: 0.85rem;
          color: var(--gray-600);
        }
      }
    }
  }
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
  
  .stat-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    display: flex;
    padding: 1.5rem;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(20px);
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow);
    }
    
    .stat-icon {
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        font-size: 3rem;
        opacity: 0.7;
      }
    }
    
    .stat-content {
      width: 70%;
      
      h3 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--gray-600);
      }
      
      .stat-value {
        font-size: 2.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.2;
      }
      
      .stat-trend, 
      .recent-activity,
      .streak-info,
      .time-info {
        font-size: 0.9rem;
        color: var(--gray-600);
        
        i {
          margin-right: 0.25rem;
        }
      }
    }
    
    // 每个卡片不同样式
    &.stat-card-1 .stat-icon i {
      color: var(--success-color);
    }
    &.stat-card-2 .stat-icon i {
      color: var(--primary-color);
    }
    &.stat-card-3 .stat-icon i {
      color: var(--warning-color);
    }
    &.stat-card-4 .stat-icon i {
      color: var(--info-color);
    }
  }
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  
  .chart-container {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: var(--transition);
    
    &:hover {
      box-shadow: var(--shadow);
    }
    
    h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      font-weight: 500;
      color: var(--gray-800);
    }
    
    .chart-inner {
      height: 300px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
  }
}

.ranking-section {
  background: linear-gradient(135deg, #3a8ffe, #0f5aab);
  border-radius: var(--border-radius);
  padding: 1.75rem;
  margin-bottom: 2rem;
  color: white;
  box-shadow: var(--shadow);
  
  h3 {
    margin-top: 0;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  .ranking-container {
    display: flex;
    align-items: center;
    
    .rank-badge {
      width: 50%;
      font-size: 2.5rem;
      text-align: center;
      font-weight: 700;
      
      span {
        font-weight: 700;
        font-size: 2.5rem;
        margin: 0 0.5rem;
      }
    }
    
    .ranking-details {
      width: 50%;
      display: flex;
      
      padding-left: 1rem;
      
      .rank-position {
        width: 100%;
        text-align: center;
        
        // padding-right: 1rem;
        
        .rank-number {
          font-size: 2.5rem;
          font-weight: 700;
          line-height: 1;
        }
        
        .rank-label {
          font-size: 2.5rem;
          color: rgba(255,255,255,0.8);
        }
      }
      
      .ranking-stats {
        width: 60%;
        padding-left: 1.5rem;
        font-size: 1.1rem;
        line-height: 1.8;
      }
    }
  }
}

.insights-section {
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  transition: var(--transition);
  
  &:hover {
    box-shadow: var(--shadow);
  }
  
  h3 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-align: center;
  }
  
  .insights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    
    .insight-card {
      text-align: center;
      padding: 1.5rem;
      border-radius: 0.5rem;
      transition: var(--transition);
      background-color: var(--gray-100);
      
      &:hover {
        transform: translateY(-5px);
        background-color: rgba(64, 158, 255, 0.05);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      }
      
      i {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: var(--primary-color);
      }
      
      h4 {
        margin: 0.75rem 0;
        font-weight: 500;
        color: var(--gray-800);
      }
      
      .insight-value {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: linear-gradient(90deg, #3a8ffe, #0f5aab);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      
      .insight-desc {
        font-size: 0.9rem;
        color: var(--gray-600);
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@media (max-width: 992px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
  
  .badge-display {
    flex-direction: column;
    text-align: center;
    
    .badge-icon {
      width: 100%;
      margin-bottom: 1.5rem;
    }
    
    .badge-info {
      width: 100%;
      padding-left: 0 !important;
    }
  }
  
  .ranking-container {
    flex-direction: column;
    
    .rank-badge {
      width: 100% !important;
      margin-bottom: 1.5rem;
    }
    
    .ranking-details {
      width: 100% !important;
      border-left: none !important;
      padding-left: 0 !important;
    }
  }
  
  .insights-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
  
  .badge-tiers {
    flex-direction: column;
    
    .badge-tier {
      margin-bottom: 1rem;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style>